<template>
  <view class="verification-list-page">
    <!-- 扫描核销按钮 -->
    <view class="scan-button" @click="handleScanVerification">
      扫描核销
    </view>

    <!-- 核销记录列表 -->
    <view class="verification-section">
      <view class="section-title">核销记录</view>
      <view class="verification-list">
        <view 
          class="verification-item" 
          v-for="(record, index) in verificationRecords" 
          :key="index"
          @click="navigateToVerificationDetail(record.id)"
        >
          <view class="record-header">
            <text class="order-no">订单号：{{ record.orderNo }}</text>
            <text class="status" :class="record.statusClass">{{ record.status }}</text>
          </view>
          <view class="record-details">
            <view class="detail-row">
              <text class="label">预约场地：</text>
              <text class="value">{{ record.court }}</text>
            </view>
            <view class="detail-row">
              <text class="label">预约时间：</text>
              <text class="value">{{ record.reservationTime }}</text>
            </view>
            <view class="detail-row">
              <text class="label">核销时间：</text>
              <text class="value">{{ record.verificationTime }}</text>
            </view>
            <view class="detail-row">
              <text class="label">操作员：</text>
              <text class="value">{{ record.operator }}</text>
            </view>
            <view class="detail-row">
              <text class="label">位置：</text>
              <text class="value">{{ record.location }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'

// 核销记录数据（模拟）
const verificationRecords = reactive([
  {
    id: 1,
    orderNo: '20230928001',
    status: '已完成',
    statusClass: 'completed',
    court: 'A01号球桌',
    reservationTime: '08:00-09:00',
    verificationTime: '2023-09-28 08:05:23',
    operator: '张管理员',
    location: '一号馆入口'
  },
  {
    id: 2,
    orderNo: '20230928002',
    status: '已完成',
    statusClass: 'completed',
    court: 'B02号球桌',
    reservationTime: '10:00-11:00',
    verificationTime: '2023-09-28 10:02:15',
    operator: '李管理员',
    location: '二号馆入口'
  },
  {
    id: 3,
    orderNo: '20230927001',
    status: '已完成',
    statusClass: 'completed',
    court: 'C03号球桌',
    reservationTime: '14:00-15:00',
    verificationTime: '2023-09-27 14:03:42',
    operator: '张管理员',
    location: '三号馆入口'
  }
])

// 处理扫描核销按钮点击事件
const handleScanVerification = () => {
  uni.showToast({
    title: '调用相机扫描核销',
    icon: 'none'
  })
  // 实际项目中这里会调用扫描功能
  // 例如使用uni.scanCode()等API
}

// 跳转到核销详情页面
const navigateToVerificationDetail = (id) => {
  uni.navigateTo({
    url: '/pages/mine/verificationDetail?id=' + id
  })
}
</script>

<style scoped>
.verification-list-page {
  min-height: 100vh;
  background-color: #e6f0ff;
  padding: 12px;
  box-sizing: border-box;
}

/* 扫描核销按钮 */
.scan-button {
  background-color: #409eff;
  color: #fff;
  font-size: 16px;
  text-align: center;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  cursor: pointer;
}

/* 核销记录区域 */
.verification-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
}

.verification-item {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  cursor: pointer;
}

.verification-item:last-child {
  margin-bottom: 0;
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.order-no {
  font-size: 14px;
  color: #666;
}

.status {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 4px;
}

.status.completed {
  background-color: #e8f3ff;
  color: #409eff;
}

.record-details {
  padding-left: 10px;
}

.detail-row {
  display: flex;
  margin-bottom: 4px;
  font-size: 14px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.label {
  color: #999;
  width: 70px;
}

.value {
  color: #333;
  flex: 1;
}
</style>